import Image from "next/image"
import { ResponsiveLayout } from "@/components/layout/responsive-layout"

const categories = [
  { id: 1, name: "T恤", icon: "👕" },
  { id: 2, name: "连衣裙", icon: "👗" },
  { id: 3, name: "短裤", icon: "🩳" },
  { id: 4, name: "运动鞋", icon: "👟" },
  { id: 5, name: "帽子", icon: "🧢" },
  { id: 6, name: "配饰", icon: "💍" },
]

const stores = [
  {
    id: 1,
    name: "夏之美金牌店",
    image: "/images/夏之美-店铺.jpg",
  },
  {
    id: 2,
    name: "登山者登山户外品牌",
    image: "/images/登山者-店铺.jpg",
  },
]

export default function CategoriesPage() {
  return (
    <ResponsiveLayout>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-2xl font-bold mb-6">宝藏店铺</h1>

        {/* Store Banners */}
        <div className="mb-8 grid gap-4 sm:grid-cols-2">
          {stores.map((store) => (
            <div key={store.id} className="overflow-hidden rounded-xl shadow-md transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
              <Image
                src={store.image}
                alt={store.name}
                width={400}
                height={200}
                className="aspect-[2/1] object-cover"
              />
              <p className="mt-2 p-2 text-lg font-medium bg-white">{store.name}</p>
            </div>
          ))}
        </div>

        {/* Categories Grid */}
        <h2 className="text-xl font-bold mb-4">全部分类</h2>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
          {categories.map((category) => (
            <div
              key={category.id}
              className="flex aspect-square flex-col items-center justify-center gap-2 rounded-xl bg-amber-50 shadow-sm transition-all duration-300 hover:bg-amber-100 hover:shadow-md hover:scale-[1.05]"
            >
              <span className="text-4xl">{category.icon}</span>
              <span className="text-sm sm:text-base font-medium text-amber-800">{category.name}</span>
            </div>
          ))}
        </div>
      </div>
    </ResponsiveLayout>
  )
}

// 这是一个展示商品分类和店铺的页面组件。
// 使用了 Next.js 的 Image 组件来优化图片的加载，并使用了自定义的 ResponsiveLayout 组件作为页面的布局容器。
// 数据分为两部分：
// 1. categories - 一个数组，包含商品分类的信息（如 T恤、连衣裙等），每个分类有 id、名称和图标。
// 2. stores - 一个数组，包含店铺信息，每个店铺有 id、名称和图片路径。
// 页面主要分为两部分：
// 1. 店铺展示区 (Store Banners)：以网格形式展示店铺的图片和名称，使用卡片式设计，支持悬停缩放和阴影效果。
// 2. 分类展示区 (Categories Grid)：以网格形式展示商品分类，包含图标和名称，同样支持悬停样式变化。
// 样式设计使用 Tailwind CSS，确保页面在不同屏幕尺寸上具备良好的响应式表现。
